<template>
  <div>
    <h2>插槽的使用</h2>
    <div class="box">
      <!-- 默认插槽 -->
      <h4>默认插槽 Header</h4>
      <slot>我是默认插槽的备选内容</slot>
      <h4>默认插槽footer</h4>
    </div>
    <!-- ***************************************** -->
    <div class="box">
      <!-- 具名插槽 -->
      <div>我是头部</div>
      <slot name="myName">我是具名插槽的备选内容</slot>
      <div>我是尾部</div>
    </div>
    <!-- ***************************************** -->
    <div class="box">
      <!-- 作用域插槽 -->
      <slot name="zuoyongyu" :info="user" :message="msg"></slot>
    </div>
  </div>
</template>

<script>
/* 
    插槽分为默认插槽、具名插槽、作用域插槽
    1. 默认插槽、具名插槽的通用格式：
        <组件名称>
            <template #myName> 
                <p>具体内容1</p>
                <p>具体内容2</p>
                <p>具体内容3</p>
            </template>
        <组件名称/>
    2. 默认插槽可以省略template标签，直接写具体内容（但不能有template标签却没有slot name）
     *************************************************************************************
    1. 默认插槽
        a) 在组件中定义时：
            <slot>可选备用内容</slot>
        b) 使用组件时：
            <组件名称>
                <p >具体内容</p>
            <组件名称/>

    2. 具名插槽
        a) 在组件中定义时：
            <slot name="myName">可选备用内容</slot>
        b) 使用组件时：【<template> 元素中的所有内容都将会被传入相应的插槽】
            <组件名称>
                <template #myName>
                    <p>具体内容</p>
                </template>
            <组件名称/>
        c) 注意：v-slot 只能添加在 <template> 上 ，除非是默认插槽，v-slot 可以直接写在组件上面
            但默认插槽也可以使用具名插槽的方法，名字是 default
            只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法。

    3. 作用域插槽
      作用域插槽可以让 app.vue 访问到组件内部data中的数据，用插槽可以让用户自己决定渲染出的DOM样式、读取slot.vue中的数据
      有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。
      a) 在组件中定义时：
        user, msg 是data{}中的数据；info，message 是app.vue中解构时的名称
        <slot name="zuoyongyu" :info="user" :message="msg"></slot>
      b) 直接接收数据：
         <template #zuoyongyu="scoped">
          <p>{{scoped}}</p>
         </template>
      c) 解构接收数据
        <template #zuoyongyu="{info,message}">
          <p>{{info}}</p>
          <p>{{message}}</p>
        </template>
*/

export default {
  components: {},
  data() {
    return {
      user: {
        name: "Lucy",
        address: "上海市静安区",
        phone: 12345678901,
      },
      msg:"hello world"
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>
<style scoped>
.box {
  display: inline-block;
  border: 1px solid red;
  margin: 20px;
  padding: 20px;
}
h2 {
  color: green;
}
</style>
